<template>
    <div class="transfer-list">
        <div class="transfer-list-box">
            <div class="transfer-list-head">
                <a-checkbox v-model:checked="checkLeftAll" @change="onCheckLeftAllChange" @click.stop="" />
                <div class="transfer-list-head-name">版本</div>
                <div class="transfer-list-head-detail">{{ checkedLeftItems.length }}/{{ checkedLeftData.length }}</div>
            </div>
            <div class="transfer-list-body">
                <template v-for="(item, index) in checkedLeftData" :key="index">
                    <div class="list-item">
                        <a-checkbox v-model:checked="item.checked" class="list-item-check" @change="leftCheckItemChange" />
                        <a-tooltip :title="item.requireName">
                            <div class="list-item-name">{{ item.requireName }}</div>
                        </a-tooltip>
                    </div>
                </template>
            </div>
            <div style="height: 13px" />
        </div>
        <div class="transfer-middle-list">
            <a-button :disabled="checkedRightItems.length == 0" :class="[checkedRightItems.length > 0 ? 'transfer-middle-button-select' : '']" @click="changePositon('left')">
                <template #icon><LeftOutlined /></template>
            </a-button>
            <a-button :disabled="checkedLeftItems.length == 0" :class="[checkedLeftItems.length > 0 ? 'transfer-middle-button-select' : '', 'transfer-middle-right-button']" @click="changePositon('right')">
                <template #icon><RightOutlined /></template>
            </a-button>
        </div>
        <div class="transfer-list-box">
            <div class="transfer-list-head">
                <a-checkbox v-model:checked="checkRightAll" @change="onCheckRightAllChange" />
                <div class="transfer-list-head-name">需求</div>
                <div class="transfer-list-head-detail">{{ checkedRightItems.length }}/{{ checkedRightData.length }}</div>
            </div>
            <div class="transfer-list-body">
                <div style="padding: 12px 15px 10px 15px">
                    <a-input v-model:value="keyword" placeholder="请输入需求名称" style="width: 100%" @change="handleSearch">
                        <template #suffix>
                            <search-outlined style="color: rgba(0, 0, 0, 0.45)" />
                        </template>
                    </a-input>
                </div>
                <template v-for="(item, index) in checkedRightData" :key="index">
                    <div class="list-item" style="display: flex; align-items: center">
                        <a-checkbox v-model:checked="item.checked" class="list-item-check" @change="rightCheckItemChange" />
                        <a-tooltip :title="item.requireName">
                            <div class="list-item-name">{{ item.requireName }}</div>
                        </a-tooltip>
                    </div>
                </template>
                <div style="height: 13px" />
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { LeftOutlined, RightOutlined, SearchOutlined } from '@ant-design/icons-vue';
import { deepClone } from '@/utils/util';
import { message } from 'ant-design-vue';
import { debounce } from '@/utils/util';
import api from '@/api';
import store from '@/store';
import { defineComponent, reactive, toRefs, getCurrentInstance, onUnmounted } from 'vue';
export default defineComponent({
    components: {
        LeftOutlined,
        RightOutlined,
        SearchOutlined
    },
    emits: ['success'],
    setup(_, { emit }) {
        const instance: any = getCurrentInstance();
        const state = reactive<any>({
            targetList: [],
            list: [],
            checkedLeftData: [], // 左边所有数据
            checkedRightData: [], // 右边所有数据
            checkLeftAll: false,
            checkRightAll: false,
            checkedLeftItems: [], // 左边选择数据
            checkedRightItems: [], // 右边选择数据
            keyword: '' // 搜索
        });
        let getDebounceList: any = null;
        const init = (targetList = []) => {
            state.targetList = mergeList(targetList, store.state.proRequire.checkedList);
            state.checkedLeftData = [...state.targetList];
            state.checkedRightData = state.list.filter((item) => {
                // 匹配list中不在targetList中的选项
                return !state.targetList.find((elem) => elem.id === item.id);
            });
            getDebounceList = debounce(getList.bind(this), 300);
        };
        const mergeList = (arr1, arr2) => {
            arr1 = deepClone(arr1);
            arr2 = deepClone(arr2);
            if (arr1.length && arr2.length) {
                for (let i = 0; i < arr2.length; i++) {
                    for (let j = 0; j < arr1.length; j++) {
                        if (arr2[i].id == arr1[j].id) {
                            arr1.splice(j, 1);
                        }
                    }
                }
                return arr2.concat(arr1);
            } else {
                return arr1.length ? arr1 : arr2;
            }
        };
        // 保存
        const handleOk = async () => {
            const query = {
                id: instance.proxy.userInfo.employeeDTO.empId,
                productRequireSystem: JSON.stringify(state.checkedLeftData)
            };
            const { success, errorMsg } = await api.userCustomModel.save(query);
            if (success) {
                emit('success');
            } else {
                message.error(errorMsg);
            }
        };
        const changePositon = (type) => {
            if (type === 'left') {
                state.checkedRightItems.forEach((item) => {
                    const index = state.checkedRightData.findIndex((elem) => elem.id === item.id);
                    if (index >= 0) {
                        state.checkedRightData.splice(index, 1);
                    }
                    item.checked = false;
                    state.checkedLeftData.push(item);
                });
                state.checkedRightItems = []; // 清空
                leftCheckItemChange(); // 更新
                rightCheckItemChange(); // 更新
            } else {
                state.checkedLeftItems.forEach((item) => {
                    const index = state.checkedLeftData.findIndex((elem) => elem.id === item.id);
                    if (index >= 0) {
                        state.checkedLeftData.splice(index, 1);
                    }
                    item.checked = false;
                    state.checkedRightData.push(item);
                });
                state.checkedLeftItems = []; // 清空
                leftCheckItemChange(); // 更新
                rightCheckItemChange(); // 更新
            }
        };
        // 左边选择点击
        const leftCheckItemChange = () => {
            changeCheckedItems('left');
            if (state.checkedLeftData.length > 0) {
                if (state.checkedLeftItems.length === state.checkedLeftData.length) {
                    state.checkLeftAll = true;
                } else {
                    state.checkLeftAll = false;
                }
            } else {
                state.checkLeftAll = false;
            }
        };
        // 右边选择点击
        const rightCheckItemChange = () => {
            changeCheckedItems('right');
            if (state.checkedRightData.length > 0) {
                if (state.checkedRightItems.length === state.checkedRightData.length) {
                    state.checkRightAll = true;
                } else {
                    state.checkRightAll = false;
                }
            } else {
                state.checkRightAll = false;
            }
        };
        const changeCheckedItems = (type) => {
            if (type === 'left') {
                state.checkedLeftItems = state.checkedLeftData.filter((item) => item.checked);
            } else {
                state.checkedRightItems = state.checkedRightData.filter((item) => item.checked);
            }
        };
        const onCheckLeftAllChange = (val) => {
            state.checkedLeftData.forEach((item, index) => {
                state.checkedLeftData[index] = {
                    ...state.checkedLeftData[index],
                    checked: val.target.checked
                };
            });
            changeCheckedItems('left');
        };
        const onCheckRightAllChange = (val) => {
            state.checkedRightData.forEach((item, index) => {
                state.checkedRightData[index] = {
                    ...state.checkedRightData[index],
                    checked: val.target.checked
                };
            });
            changeCheckedItems('right');
        };
        // 自定义模糊查询
        const handleSearch = (e) => {
            const val = e.target.value;
            getDebounceList(val);
        };
        const getList = async (name = '') => {
            const query = {
                name,
                system: store.state.proRequire.checkedList[0].requireSystem,
                type: 1
            };
            let { success, moule, errorMsg } = await api.productRequireModel.findByRequireName(query);
            if (success) {
                moule = moule || [];
                state.list = [...moule];
                init();
            } else {
                message.error(errorMsg);
            }
        };
        onUnmounted(() => {
            store.commit('proRequire/SET_CHECKEDLIST', []);
        });
        getList();
        return {
            ...toRefs(state),
            init,
            handleOk,
            changePositon,
            handleSearch,
            onCheckLeftAllChange,
            onCheckRightAllChange,
            leftCheckItemChange,
            rightCheckItemChange
        };
    }
});
</script>

<style scoped lang="less">
.transfer-name {
    font-size: 12px;
    padding-bottom: 5px;
    color: #aaa;
}

.transfer-list {
    user-select: none;
    display: flex;
    align-items: center;
    .transfer-list-box {
        // flex: 1;
        width: 40%;
        min-width: 364px;
        border: 1px solid #e6e6e6;
        border-radius: 2px;
        height: 350px;
        position: relative;
        overflow: hidden;
    }
    .transfer-middle-list {
        width: 50px;
        text-align: center;
        button {
            border: 1px solid #cccccc;
            width: 30px;
            height: 30px;
            // border-radius: 17px;
            background-color: #f5f7fa;
        }
        .transfer-middle-icon {
            color: #cccccc;
            font-size: 14px;
        }
        .transfer-middle-right-button {
            margin-top: 15px;
            margin-left: 0;
        }

        .transfer-middle-button-select {
            border: 1px solid #e6e6e6 !important;
            background-color: @primary-color !important;
            color: white !important;
            .transfer-middle-icon {
                color: white !important;
            }
        }
    }
    .transfer-list-head {
        display: flex;
        align-items: center;
        padding: 15px;
        border-bottom: 1px dashed #e6e6e6;
        font-size: 13px;
        .transfer-list-head-name {
            color: #333;
            flex: 1;
            margin: 0 8px;
        }
        .transfer-list-head-detail {
            color: #aaa;
        }
    }
    .transfer-list-body {
        height: 290px;
        position: relative;
        overflow-y: auto;
    }

    .list-item {
        padding: 5px 15px;
        display: flex;
        align-items: center;
        background-color: white;
        height: 38px;
        cursor: pointer;

        &:hover {
            background: #eaf5fe;
        }
        .list-item-check {
            margin-right: 8px;
        }
        .list-item-name {
            font-size: 13px;
            color: #333;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}
</style>
